<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <div class="app-home dpflex fdcolumn">
        <!-- 广告 -->
        <div class="banner">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../imgs/运动照片1.jpeg"></div>
                    <div class="swiper-slide"><img src="../imgs/运动照片2.jpeg"></div>
                    <div class="swiper-slide"><img src="../imgs/index-swiper-bg3.jpg"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 主体 -->
        <div class="main  flex1 dpflex fdcolumn">
            <!-- 排名&打卡 -->
            <div class="main-one dpflex">
                <span class="rank">
                    <img src="../imgs/index-card-rank.png" alt="">
                    <p class="one-day">今日排名</p>
                    <p id="rank" class="one-num">9</p>
                </span>
                <span class="sum">
                    <img src="../imgs/index-card-sum.png" alt="">
                    <p class="one-sum">累计打卡 <span id="punchDay">28</span> 天</p>
                    <p id="todayPunch" class="one-today">今日打卡</p>
                </span>
            </div>
            <!-- 数据&徽章 -->
            <div class="main-two dpflex">
                <span class="s-data">
                    <p class="two-day">运动数据</p>
                </span>
                <span class="s-sum">
                    <p class="two-sum">累计运动徽章</p>
                    <p class="two-num" id="badge">3 <span>枚</span></p>
                </span>
            </div>
            <!-- 课程训练 -->
            <div class="main-train dpflex">
                <p class="train-three">课程训练</p>
            </div>
            <!-- 户外跑步 -->
            <div class="main-out dpflex">
                <p class="out-train">户外跑步</p>
            </div>
        </div>
    </div>
    <!-- 图标 -->
    <!-- <div class="footer">
            <a href="./home.html" class="nav-item">
                <span class="iconfont icon-shouye1 active"></span>
                <p class="active">首页</p>
            </a>
            <a class="nav-item">
                <span class="iconfont icon-bianzubeifen"></span>
                <p>运动</p>
            </a>
            <a class="nav-item">
                <span class="iconfont icon-pintu"></span>
                <p>圈子</p>
            </a>
            <a class="nav-item">
                <span class="iconfont icon-wode"></span>
                <p>我的</p>
            </a>
        </div> -->
</body>

</html>